import React, { Component } from 'react';
import '../styles/AddAddress.scss'
import { NavBar,Form,Input,Button,Switch,Cascader,Toast} from 'antd-mobile'
import * as service from '../api/index'

class EditAddress extends Component {
    constructor(props){
        super(props)
        this.state={
            options: [
                {
                    label: '浙江',
                    value: '浙江',
                    children: [
                        {
                            label: '杭州',
                            value: '杭州',
                            children: [
                                {
                                    label: '西湖区',
                                    value: '西湖区',
                                },
                                {
                                    label: '上城区',
                                    value: '上城区',
                                },
                                {
                                    label: '余杭区',
                                    value: '余杭区',
                                    disabled: true,
                                },
                            ],
                        },
                        {
                            label: '温州',
                            value: '温州',
                            children: [
                                {
                                    label: '鹿城区',
                                    value: '鹿城区',
                                },
                                {
                                    label: '龙湾区',
                                    value: '龙湾区',
                                    disabled: true,
                                },
                                {
                                    label: '瓯海区',
                                    value: '瓯海区',
                                },
                            ],
                        },
                        {
                            label: '宁波',
                            value: '宁波',
                            children: [
                                {
                                    label: '海曙区',
                                    value: '海曙区',
                                },
                                {
                                    label: '江北区',
                                    value: '江北区',
                                },
                                {
                                    label: '镇海区',
                                    value: '镇海区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '安徽',
                    value: '安徽',
                    children: [
                        {
                            label: '合肥',
                            value: '合肥',
                            children: [
                                {
                                    label: '包河区',
                                    value: '包河区',
                                },
                                {
                                    label: '蜀山区',
                                    value: '蜀山区',
                                },
                                {
                                    label: '瑶海区',
                                    value: '瑶海区',
                                },
                            ],
                        },
                        {
                            label: '芜湖',
                            value: '芜湖',
                            children: [
                                {
                                    label: '镜湖区',
                                    value: '镜湖区',
                                },
                                {
                                    label: '弋江区',
                                    value: '弋江区',
                                },
                                {
                                    label: '湾沚区',
                                    value: '湾沚区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '江苏',
                    value: '江苏',
                    children: [
                        {
                            label: '南京',
                            value: '南京',
                            children: [
                                {
                                    label: '玄武区',
                                    value: '玄武区',
                                },
                                {
                                    label: '秦淮区',
                                    value: '秦淮区',
                                },
                                {
                                    label: '建邺区',
                                    value: '建邺区',
                                },
                            ],
                        },
                        {
                            label: '苏州',
                            value: '苏州',
                            children: [
                                {
                                    label: '虎丘区',
                                    value: '虎丘区',
                                },
                                {
                                    label: '吴中区',
                                    value: '吴中区',
                                },
                                {
                                    label: '相城区',
                                    value: '相城区',
                                },
                            ],
                        },
                    ],
                },
            ],
            visible: false,
            province: '',
            city: '',
            county: '',
            ischecked:null,
            disable:false,
            name:''   ,
            fromitem:'' ,          
    }
}
Fromref = React.createRef()
 back(){
    this.props.history.goBack()
 }
 Selectcity(val){//城市选择
   var [a,b,c]=val
   console.log(a,b,c);
   this.setState({province:a,city:b,county:c},()=>{
      console.log(this.state.province,this.state.city,this.state.county);
   })
 } 
 isDefault(e){//是否为默认选中
    this.setState( {ischecked:e})
 }
async submit(){//发送申请，修改地址
    var addinfo = this.Fromref.current.getFieldsValue()
    var userid = localStorage.getItem('userid')
    if( addinfo.name && addinfo.tel && addinfo.addressDetail&& this.state.city&&this.state.county&&this.state.province != undefined){
     var res = await service.address_update(
            {addressid:this.props.location.state.item.addressid,
             userid,name:addinfo.name,tel:addinfo.tel,
             province:this.state.province,
             city:this.state.city,
             county:this.state.county,
             addressDetail:addinfo.addressDetail,
             isDefault:addinfo.isDefault})
        if (res.data.code === '200') {
            Toast.show({
                content: '修改成功',
                icon: 'success',
                duration: 1000,
            })
            this.props.history.goBack('/useraddress') 
        }
    }else{
        Toast.show({
            content: '你还有信息没有填完呢！',
            duration: 1000,
        })
    }
    
 }
 phoneValidator = (_, value) => {//手机号校验
    if (value) {
        let reg = /^1[3-9]\d{9}$/;
        if (reg.test(value)) {
            this.setState({
                loginname: value
            })
            return Promise.reject(this.setState({disable:false}));
        }
        return Promise.reject(new Error('手机号无效'),this.setState({disable:true}));
    } else {
        return Promise.reject(new Error('手机号不能为空'),this.setState({disable:true}));
    }
}
nameValidator = (_, value) => {//姓名校验
    if (value) {
        return Promise.reject(this.setState({disable:false}));
    } else {
        return Promise.reject(new Error('详细地址不能为空'),this.setState({disable:true}));
    }
}
addressValidator=(_, value)=>{//详细收货地址校验
    console.log(value)
    if (value) {
        return Promise.reject(this.setState({disable:false}));
    } else {
        return Promise.reject(new Error('密码不能为空'),this.setState({disable:true}));
    }
}

    render() {
        return (
            <div className='addaddress' >
                <div className="top">
                    <NavBar onBack={()=>{this.back()}}>添加地址</NavBar>
                </div>
                <div className="addaddress_main">
                    <Form
                        layout='horizontal'
                        ref={this.Fromref}
                        initialValues={this.props.location.state && this.props.location.state.item}
                        footer={
                            <Button block type='submit' disabled ={this.state.disable} color='primary' size='large'  onClick={()=>{this.submit()}} >
                                修改
                            </Button>
                        }
                    >
                        {/* 姓名 */}
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{validator: this.nameValidator}]}
    
                        >
                            <Input onChange={console.log} placeholder='姓名'  />
                        </Form.Item>
                         {/*手机号  */}
                        <Form.Item
                            name='tel'
                            label='电话'
                            rules={[{validator: this.phoneValidator}]}
                        >
                            <Input onChange={console.log} placeholder='电话' />
                        </Form.Item>      
                         {/* 地区 */}
                        <Form.Item
                            name='province1'
                            label='地区'
                            childElementPosition='right'
                            onClick={() => { this.setState({ visible: !this.state.visible }) }}
                        >
                            <Cascader
                                options={this.state.options}
                                visible={this.state.visible}
                                onClose={() => { this.setState({ visible: !this.state.visible }) }}
                                onConfirm={() => { this.setState({ visible: !this.state.visible }) }}
                                onSelect={(val) => { this.Selectcity(val) }}
                            >
                                {items => {
                                    if (items.every(item => item === null)) {
                                        return '未选择'
                                    } else {
                                        return items.map(item => item?.label ?? '未选择').join('-')
                                    }
                                }}
                            </Cascader>
                        </Form.Item>
                        {/* 详细收货地址 */}
                        <Form.Item
                            name='addressDetail'
                            label='详情地址'
                            rules={[{validator: this.addressValidator}]}
                        >
                            <Input onChange={console.log} placeholder='请输入地址' />
                        </Form.Item>
                         {/* 是否默认 */}
                        <Form.Item
                            name='isDefault'
                            label='设为默认地址'
                            childElementPosition='right'
                        >
                            <Switch   onChange={(e) => { this.isDefault(e) }}    />
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default EditAddress;